<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

const options = ref({
  grid: {
    bottom: 30,
    left: 80,
    right: 30
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    show: true,
    icon: 'circle',
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 97,
    textStyle: {
      color: '#ebeef5',
      fontSize: 24
    },
    data: []
  },
  xAxis: [
    {
      type: 'category',
      // boundaryGap: false,
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#ebeef5',
        fontSize: 20
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '%',
      nameTextStyle: {
        color: 'rgba(255,255,255,0.85)',
        fontSize: 20,
        align: 'right',
        padding: [0, 5, 8, 0]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#ebeef5',
        fontSize: 20,
        align: 'right'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#182758',
          width: 2
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    },
    {
      type: 'value',
      name: '',
      nameTextStyle: {
        color: '#ebeef5'
      },
      axisLabel: {
        show: false,
        formatter: '{value}',
        color: '#ebeef5',
        fontSize: 20
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '',
      type: 'line',
      color: '#f7c873',
      smooth: true,
      symbol: 'true',
      showSymbol: false,
      lineStyle: {
        color: '#f7c873',
        width: 2,
        shadowColor: 'rgba(247, 200, 115, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 5
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(247, 200, 115, 0.4)' },
            { offset: 1, color: 'rgba(247, 200, 115, 0)' }
          ]
        }
      },
      //   yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      data: []
    },
    {
      name: '',
      type: 'line',
      color: '#0FC6C2',
      smooth: true,
      symbol: 'true',
      // showSymbol: false,
      label: {
        show: true,
        position: 'top',
        // position: 'outside', // 可能导致标签超出画布
        // overflow: 'break', // 允许标签溢出
        color: '#fff',
        fontSize: 20
      },
      lineStyle: {
        color: '#0FC6C2',
        width: 2,
        shadowColor: 'rgba(15, 198, 194, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 5
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(15, 198, 194, 0.4)' },
            { offset: 1, color: 'rgba(15, 198, 194, 0)' }
          ]
        }
      },
      //   yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      data: []
      
    }
  ]
})

watch(
  () => props.data,
  (val) => {
    const {legendList, timeList, targetList, actualList } = val
    options.value.xAxis[0].data = timeList
    // options.value.legend.data = legendList
    options.value.series[0].data = targetList
    options.value.series[1].data = actualList
    options.value.series[0].name = legendList[0]
    options.value.series[1].name = legendList[1]
  },
  {
    deep: true, // 开启深度监听
    immediate: true // 立即触发一次（可选）
  }
)
</script>
<template>
  <MyChart height="350px" :option="options" />
</template>
